<script>
import { getProListFn } from '@/api/pro'
export default {
    data() {
        return {
            proList: [],
            total: 0,
            current: 1
        }
    },
    mounted() {
        getProListFn({
            count: this.current,
            limitNum: 5
        }).then(res => {
            // console.log(res);
            this.total = res.total
            this.proList = res.data
        })
    },
    methods: {
        changeCurrent(value) {
            // console.log(value);
            getProListFn({
                count: value,
                limitNum: 5
            }).then(res => {
                // console.log(res);
                this.total = res.total
                this.proList = res.data
            })
        }
    },
}

</script>
<template>
    <div>
        <h5>商品列表</h5>
        <el-table :data="proList" style="width: 100%">
            <el-table-column type="index" label="序号" width="180" />
            <el-table-column label="商品图片" width="180">
                <template #default="{ row}">
                    <div>
                        <el-image style="width: 75px" :src="row.img1"></el-image>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="proname" label="商品名称" width="320" />
            <el-table-column prop="category" label="商品分类" />
            <el-table-column prop="originprice" label="商品价格" />
        </el-table>

          <el-pagination @current-change="changeCurrent" v-model:current-page="current" :page-size="5" background layout="prev, pager, next" :total="total" />

    </div>
</template>